import React, { Component } from 'react'
// 这两个组件用来定义前端路由规则,Route组件必须被Routes组件包裹
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import Index from './pages/Index'
import Detail from './pages/Detail'
import Test1 from './pages/Test1'
import Test2 from './pages/Test2'
export default function App() {
  return (
    // 注意: 一般前端路由规则配置的代码,都写在App组件中
    <div>
      <NavLink
        to="/index"
        style={({ isActive }) => {
          return isActive ? { fontSize: 80, color: 'hotpink' } : {}
        }}
        // 默认嵌套路由高亮,上一级路由也高亮,在上一级写上end.则嵌套高亮,上一级不高亮
        end
      >
        index
      </NavLink>
      <NavLink
        to="/detail"
        style={({ isActive }) => {
          return isActive ? { fontSize: 80, color: 'hotpink' } : {}
        }}
      >
        detail
      </NavLink>
      <hr />
      <Routes>
        {/* 一个Route代表一条前端路由规则 */}
        <Route path="index" element={<Index></Index>}>
          {/* /index相当于是一级路由,嵌套路由写在以及路由规则的子节点位置 */}
          <Route path="test1" element={<Test1></Test1>}></Route>
          <Route path="test2" element={<Test2></Test2>}></Route>
        </Route>
        <Route path="detail" element={<Detail></Detail>}></Route>
      </Routes>
    </div>
  )
}
